@extends('layout.page')
@section('title','章节管理 列表')
@section('stylesheet')
    <!-- Sweet Alert -->
    <link href="/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
    <link href="/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet">
@endsection

@section('static-page')

    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>事件</h5>

            </div>
            <div class="ibox-content">
                <div class="">
                    {{----}}
                    <a href="/chapter/create" class="btn btn-primary">添加根节点</a>
                </div>


                <div class="col-sm-12">
                    <h5>我的：</h5>
                    <hr>
                    <div id="2event_output">
                        <div class="panel-body">
                            <div class="panel-group" id="version">
                                <div class="panel panel-default">

                                    @foreach($nestList as $key => $val)
                                        <div class="panel-heading" style="border: 1px solid #ddd">
                                            <h5 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#version" href="#v41">
                                                    {{-- <span class="glyphicon glyphicon-plus"></span>--}}
                                                    <span class="nav-label">{{ $val }}</span>
                                                </a>
                                                <div class="pull-right">
                                                    <a href="JavaScript:void(0);" class="text-danger _delete-node" data-value="{{ $key }}">删除节点|</a>
                                                    <a href="/chapter/edit?id={{ $key }}">编辑节点|</a>
                                                    <a href="/chapter/create?pid={{ $key }}" class="text-warning"> 添加子节点</a>

                                                </div>
                                                <div class="pull-right"></div>
                                            </h5>
                                        </div>
                                    @endforeach

                                    {{--<div class="panel-heading">
                                        <h5 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#version" href="#v41">
                                                <span class="glyphicon glyphicon-minus"></span>
                                                <span class="nav-label">v4.1.0</span>
                                            </a>
                                            <div class="pull-right"><a href="JavaScript:void(0);"> 添加子节点</a> </div>
                                            <div class="pull-right"><a href="JavaScript:void(0);"><samll>删除节点|</samll></a></div>
                                        </h5>
                                    </div>
                                    <div class="panel-heading">
                                        <h5 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#version" href="#v41">
                                                <span class="glyphicon glyphicon-remove"></span>
                                                <span class="nav-label">v4.1.0</span>
                                            </a>
                                            <div class="pull-right"><a href="JavaScript:void(0);"> 添加子节点</a> </div>
                                            <div class="pull-right"><a href="JavaScript:void(0);"><samll>删除节点|</samll></a></div>
                                        </h5>
                                    </div>--}}

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="clearfix"></div>


                <div class="col-sm-6">
                    <div id="treeview11" class="test">

                    </div>
                </div>
                <div class="col-sm-6">
                    <h5>事件输出：</h5>
                    <hr>
                    <div id="event_output"></div>
                </div>
                <div class="clearfix"></div>


            </div>
        </div>
    </div>

    <div class="col-sm-12" style="display: none;">
        <div class="ibox-content">
            <div class="text-center">
                <button id="btn-open-model" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                </button>
            </div>
            <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content animated bounceInRight">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                            </button>
                        </div>

                        <div class="modal-body">
                            <p class="text-warning">删除操作请直接点击删除按钮</p>
                            <p class="text-warning">如果新增请填写下表</p>
                            <div class="form-group">
                                <label>章节名称</label>
                                <input type="text" name="info[title]"
                                       placeholder="章节名称"
                                       class="form-control">
                            </div>
                            <div class="form-group">
                                <label>章节描述</label>
                                <input type="info[description]" placeholder="章节描述"
                                       class="form-control">
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary">删除该节点</button>
                            <button type="button" class="btn btn-primary">保存子节点</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    </div>


@endsection

@section('javascript')
    <!-- Sweet alert -->
    <script src="/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="/js/plugins/fancybox/jquery.fancybox.js"></script>
    <script src="/js/plugins/treeview/bootstrap-treeview.js"></script>
    <script>
        $(document).ready(function () {
            var defaultData = [
                {
                    text: '父节点 1',
                    href: '#parent1',
                    tags: ['4'],
                    nodes: [
                        {
                            text: '子节点 1',
                            href: '#child1',
                            tags: ['2'],
                            nodes: [
                                {
                                    text: '孙子节点 1',
                                    href: '#grandchild1',
                                    tags: ['0']
                                },
                                {
                                    text: '孙子节点 2',
                                    href: '#grandchild2',
                                    tags: ['0']
                                }
                            ]
                        },
                        {
                            text: '子节点 2',
                            href: '#child2',
                            tags: ['0']
                        }
                    ]
                },
                {
                    text: '父节点 2',
                    href: '#parent2',
                    tags: ['0']
                },
                {
                    text: '父节点 3',
                    href: '#parent3',
                    tags: ['0']
                },
                {
                    text: '父节点 4',
                    href: '#parent4',
                    tags: ['0']
                },
                {
                    text: '父节点 5',
                    href: '#parent5',
                    tags: ['0']
                }
            ];


            $('#treeview11').treeview({
                color: "#428bca",
                data: defaultData,
                onNodeSelected: function (event, node) {
                    $("#btn-open-model").click();
                }
            });
            $("._addclick").click(function () {
                $("#btn-open-model").click();
            });
            
            $("._delete-node").click(function () {
                var id = $(this).data('value');
                var docuElem=$(this);
                swal({
                            title: "您确定要删除这条信息吗",
                            text: "删除后将无法恢复，请谨慎操作！",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "删除！",
                            cancelButtonText: "取消",
                            closeOnConfirm: false,
                            closeOnCancel: false
                        },
                        function (isConfirm) {
                            if (isConfirm) {
                                //继续执行
                                $.ajaxSetup({
                                    headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' }
                                });
                                $.ajax({
                                    type:'post',
                                    url:'/chapter/delete',
                                    dataType:'json',
                                    data:{id:id},
                                    success: function(data){
                                        data=eval(data);
                                        console.log(data.code);
                                        if(data.code==1){
                                            docuElem.parents('.panel-heading').remove();
                                            swal({
                                                title: "操作成功",
                                                type: "success",
                                                timer: 1000,
                                                showCancelButton: false,
                                                closeOnConfirm: false,
                                                closeOnCancel: false
                                            });
                                            document.location.reload();//当前页面 
                                        }else{
                                            swal({
                                                title: data.message,
                                                type: "error",
                                                timer: 1000,
                                                showCancelButton: false,
                                                closeOnConfirm: false,
                                                closeOnCancel: false
                                            });
                                        }
                                    }
                                });
                            } else {
                                swal({
                                    title: "您取消了删除操作！",
                                    type: "error",
                                    timer: 1000,
                                    showCancelButton: false,
                                    closeOnConfirm: false,
                                    closeOnCancel: false
                                });
                            }
                        }
                );
            });
        });

    </script>

@endsection
